<template>
	<div style="width: 1000px;">
		<div>
		   <div>
		        <el-button type="primary" @click="addBtn" size="mini">添加</el-button>
		    </div>
		</div>
		<br>
		<el-table  :data="list"
			 border  
			 style="width: 100%"
			>
			<el-table-column   align="center"    prop="img_name"  width="350"  label="图片名称"></el-table-column>
		
			 <el-table-column  label="图片"   align="center">
			      <template slot-scope="scope">
			         <div>
						<el-image style="width: 100px; height: 50px" 
						:preview-src-list="[scope.row.img_url]"
						:src="scope.row.img_url"></el-image>
			 		</div>
			      </template>
			  </el-table-column>
			<el-table-column   align="center"    prop="add_time"    label="添加时间"></el-table-column>
			
		   <el-table-column  label="操作"   align="center">
		        <template slot-scope="scope">
					<el-button @click="selectImg(scope.row)" type="text" v-if="isSelect==1">选择</el-button>
					<el-button type="text" @click="delRow(scope.row)">删除</el-button>
		        </template>
		    </el-table-column>
		</el-table>
		<div class="page">
		    <el-pagination
		            background
		            @size-change="pageChange"
		            @current-change="handleCurrentChange"
		            :current-page="page"
		            :page-size="pageSize"
		            layout="total, sizes, prev, pager, next, jumper"
		            :total="page_totle">
		    </el-pagination>
		</div>
		<el-dialog
		        title="添加"
				:close-on-click-modal="false"
				:modal-append-to-body="false"
				:append-to-body="true"
		        :visible.sync="formShow"
		        width="450px"
		>
		  <div style="text-align: center;">
		          	  <el-upload
		          	    class="upload-demo"
						v-if="formShow"
						:headers="headers"
		          	    drag
		          		:on-success="successFile"
		          		:on-progress="progressFile"
		          	    :action="action"
		          		:data="params"
		          	    >
		          	    <i class="el-icon-upload"></i>
		          	    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
		          	    <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
		          	  </el-upload>
		          	  <br>
		          	  <el-progress :percentage="percent"></el-progress>
		  </div>
		</el-dialog>
	</div>
</template>

<script>

	export default {
		data(){
			return {
				page:1,
				pageSize:10,
				action:'',
				percent:0,
				params:{
					cid:"",
				},
				headers:{
					Authorization:""
				}
			}
		},
		props:{
			isSelect:{
				type:String,
				default:'1'  // 1可以选择 2不可以选择
			}
		},
		components:{
			
		},
		mounted() {
			if(this.$env=='dev'){
				this.action = this.$domain + '/uplodeFile/uplodeImageLocal'
			}else{
				this.action = this.$domain + '/uplodeFile/uplodeImage'
			}
			this.params.cid = sessionStorage.getItem('cid')
			this.headers.Authorization = sessionStorage.getItem('token')+'_'+sessionStorage.getItem('cid')
			this.lodeList()
		},
		methods:{
			selectImg(row){
				this.$emit('getImgData',row.img_url)
			},
			successFile(response, file, fileList){
				if(response.code==200){
					this.formShow = false
					 this.lodeList()
				}else{
					this.$message.error(response.msg)
				}
				this.percent = 0
			},
			progressFile(event, file, fileList){
				let percent = event.percent
				this.percent = percent
			},
			
			delRow(row){
				this.$confirm('确定删除', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
							let params = {
								savename:row.savename,
								id:row.id
							}
							let url
							if(this.$domain=='http://www.hs.com/index.php'){
								url = '/imageFileSys/delImgLocal'
							}else{
								url = '/imageFileSys/delImgCos'
							}
				          this.$post(url,params,res=>{
							  this.lodeList()
						  })
				        })
			},
			
			addBtn(){
				this.formShow = true
			},
			lodeList(){
				let params = {
					page:this.page,
					pageSize:this.pageSize
				}
				this.$post('/imageFileSys/lodeImgList',params,res=>{
					let data = res.data.data
					this.page_totle = data.count
					this.list = data.result
				})
			},
		}
	}
</script>

<style>
</style>